<!DOCTYPE html>
<html lang="en">
<head>
	<title>ChatCore Settings</title>
	<!--Import Google Icon Font-->
	<link rel="stylesheet" href="Statics/Css/Material+Icons.css">
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="Statics/Css/materialize.min.css">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta charset="UTF-8">
	<link rel="stylesheet" href="Statics/Css/default.css">
	<script src="Statics/Js/jquery-3.5.1.min.js"></script>
</head>
<body class="grey lighten-3">
	<nav>
		<div class="nav-wrapper">
			<div style="display:flex; flex-direction:row">
				<div class="brand-logo" id="brand-logo">ChatCore</div>
				<div style="padding: 0 16px;">
					<a class='dropdown-trigger btn' href='#' data-target='languagedropdown'><span class="material-icons" style="padding: 8px 0;">g_translate</span></a>
					<ul id='languagedropdown' class='dropdown-content'>
						<li><a onclick='change_language("en")'>English</a></li>
						<li><a onclick='change_language("zh")'>中文(简体)</a></li>
						<li><a onclick='change_language("ja")'>日本語</a></li>
					</ul>
				</div>
				<ul id="nav-mobile" class="right hide-on-med-and-down" style="margin-left: auto;">
					<li><span id="version">Version </span>{libVersion}</li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container">
		<form id="settings-form" name="settings-form">
			<div class="row">
				<!--twitch setting-->
				<div class="col s4 m6">
					<div class="card">
						<div class="card-content twitch-header white-text">
							<span class="card-title" id="twitch-settings-title">Twitch Settings</span>
						</div>
						<div class="card-content">
							<div class="row">
								<p class="caption" id="twitch-settings-login">Login</p>
							</div>
							<div class="row">
								<a class="waves-effect waves-light btn twitch-button" id="twitch-settings-login-button"
								   href="https://id.twitch.tv/oauth2/authorize?client_id=b5eughx9nidvpkakmjh112780ytdqi&redirect_uri=http://localhost:8338/&response_type=token&force_verify=true&scope=channel:moderate chat:edit chat:read whispers:read whispers:edit&state=Heya">
									Login on Twitch
								</a>
							</div>
							<div>
								<div class="input-field">
									<input id="twitch_oauth_token" name="twitch_oauth_token" type="password" class="validate"
										   placeholder="oauth:12abc3defg4p678arw9aq2xasd0gwa43" form="settings-form">
									<label for="twitch_oauth_token" id="twitch-settings-oauth-token">OAuth token</label>
								</div>
								<p>
									<label>
										<input id="twitch_oauth_token_visible" type="checkbox" class="filled-in"
											   onclick="toggleTwitchOAuthVisibility()" />
										<span id="twitch-settings-oauth-token-toggle">OAuth token visible</span>
									</label>
								</p>
							</div>

							<div class="row">
								<p class="caption"><span id="twitch-settings-channel-title">Channels</span><a class="btn-floating pulse cyan tooltipped" data-position="right" id="twitch-settings-channel-tooltipped"><i class="material-icons">info_outline</i></a></p>
							</div>
							<div class="row">
								<div class="chips" id="twitch-settings-channels">
								</div>
							</div>

							<div class="row">
								<p class="caption" id="twitch-settings-emote-settings">Emote settings</p>
							</div>
							<div class="row">
								<div class="switch">
									<label>
										<input id="ParseBTTVEmotes" name="ParseBTTVEmotes" type="checkbox" form="settings-form">
										<span class="lever"></span>
										<span id="twitch-settings-parse-bbtv-emotes">Parse BTTV Emotes</span>
									</label>
								</div>
							</div>

							<div class="row">
								<div class="switch">
									<label>
										<input id="ParseFFZEmotes" name="ParseFFZEmotes" type="checkbox" form="settings-form">
										<span class="lever"></span>
										<span id="twitch-settings-parse-ffz-emotes">Parse FFZ Emotes</span>
									</label>
								</div>
							</div>

							<div class="row">
								<div class="switch">
									<label>
										<input id="ParseTwitchEmotes" name="ParseTwitchEmotes" type="checkbox" form="settings-form">
										<span class="lever"></span>
										<span id="twitch-settings-parse-twitch-emotes">Parse Twitch Emotes</span>
									</label>
								</div>
							</div>

							<div class="row">
								<div class="switch">
									<label>
										<input id="ParseCheermotes" name="ParseCheermotes" type="checkbox" form="settings-form">
										<span class="lever"></span>
										<span id="twitch-settings-parse-cheermotes">Parse Cheermotes</span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--bilibili setting-->
				<div class="col s4 m6">
					<div class="card">
						<div class="card-content bilibili-header white-text">
							<span class="card-title" id="bilibili-settings-title">Bilibli Settings</span>
						</div>
						<div class="card-content">
							<div class="input-field">
								<input id="bilibili_room_id" name="bilibili_room_id" type="number" class="validate"
									   placeholder="123456" form="settings-form">
								<label for="bilibili_room_id" id="bilibili-settings-room-id">Room ID</label>
							</div>

							<div class="row">
								<p class="caption" id="bilibili-settings-danmuku-settings">Danmuku settings</p>
							</div>
							<ul class="collapsible popout">
								<li>
									<div class="collapsible-header"><i class="material-icons">chat</i><span id="bilibili-settings-danmuku-settings-basic">Basic</span></div>
									<div class="collapsible-body">
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_danmuku" name="danmuku_danmuku" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-danmuku">Danmuku</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_superchat" name="danmuku_superchat" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-superchat">Super Chat</span>
												</label>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="collapsible-header"><i class="material-icons">attach_money</i><span id="bilibili-settings-danmuku-settings-gift">Gift</span></div>
									<div class="collapsible-body">
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_gift" name="danmuku_gift" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-gift">Gift</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_gift_combo" name="danmuku_gift_combo" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-gift_combo">Gift Combo</span>
												</label>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="collapsible-header"><i class="material-icons">connect_without_contact</i><span id="bilibili-settings-danmuku-settings-interaction">Interaction</span></div>
									<div class="collapsible-body">
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_enter" name="danmuku_interaction_enter" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-enter">Enter Room</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_follow" name="danmuku_interaction_follow" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-follow">Follow</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_share" name="danmuku_interaction_share" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-share">Share Room</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_special_follow" name="danmuku_interaction_special_follow" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-special-follow">Special Follow</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_mutual_follow" name="danmuku_interaction_mutual_follow" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-mutual-follow">Mutual Follow</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_guard_enter" name="danmuku_interaction_guard_enter" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-guard-enter">Guard Enter Room</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_effect" name="danmuku_interaction_effect" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-effect">Enter Room Effect</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_anchor" name="danmuku_interaction_anchor" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-anchor">Anchor</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_interaction_raffle" name="danmuku_interaction_raffle" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-interaction-raffle">Raffle</span>
												</label>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="collapsible-header"><i class="material-icons">anchor</i><span id="bilibili-settings-danmuku-settings-guard">Guard</span></div>
									<div class="collapsible-body">
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_new_guard" name="danmuku_new_guard" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-new-guard">New Guard</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_new_guard_msg" name="danmuku_new_guard_msg" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-new-guard-msg">New Guard Message</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_guard_msg" name="danmuku_guard_msg" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-guard-msg">Guard Boardcast Message</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_guard_lottery" name="danmuku_guard_lottery" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-guard-lottery">Guard Lottery</span>
												</label>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="collapsible-header"><i class="material-icons">notifications</i><span id="bilibili-settings-danmuku-settings-notification">Other Notification</span></div>
									<div class="collapsible-body">
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_block_list" name="danmuku_notification_block_list" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-block_list">Block List</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_room_info_change" name="danmuku_notification_room_info_change" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-room-info-change">Room Information Change</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_room_prepare" name="danmuku_notification_room_prepare" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-room-prepare">Room Preparing</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_room_online" name="danmuku_notification_room_online" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-room-online">Room Online</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_room_rank" name="danmuku_notification_room_rank" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-room-rank">Room Rank</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_boardcast" name="danmuku_notification_boardcast" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-boardcast">Boardcast</span>
												</label>
											</div>
										</div>
										<div class="row">
											<div class="switch">
												<label>
													<input id="danmuku_notification_junk" name="danmuku_notification_junk" type="checkbox" form="settings-form">
													<span class="lever"></span>
													<span id="bilibili-settings-danmuku-notification-junk">Junk (includes Banned Msg)</span>
												</label>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="collapsible-header"><i class="material-icons">do_not_disturb_on</i><span id="bilibili-settings-danmuku-settings-block-list">Block List</span></div>
									<div class="collapsible-body">
										<div class="row">
											<p class="caption"><span id="bilibili-settings-block-list-username">Blocked Username</span><a class="btn-floating pulse cyan tooltipped" data-position="right" id="bilibili-settings-block-list-username-tooltipped"><i class="material-icons">info_outline</i></a></p>
										</div>
										<div class="row">
											<div class="chips" id="bilibili-settings-block-list-usernames">
											</div>
										</div>
										<div class="row">
											<p class="caption"><span id="bilibili-settings-block-list-uid">Blocked UID</span><a class="btn-floating pulse cyan tooltipped" data-position="right" id="bilibili-settings-block-list-uid-tooltipped"><i class="material-icons">info_outline</i></a></p>
										</div>
										<div class="row">
											<div class="chips" id="bilibili-settings-block-list-uids">
											</div>
										</div>
										<div class="row">
											<p class="caption"><span id="bilibili-settings-block-list-keyword">Blocked Keywords</span><a class="btn-floating pulse cyan tooltipped" data-position="right" id="bilibili-settings-block-list-keyword-tooltipped"><i class="material-icons">info_outline</i></a></p>
										</div>
										<div class="row">
											<div class="chips" id="bilibili-settings-block-list-keywords">
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<!--global setting-->
				<div class="col s4 m6">
					<div class="card">
						<div class="card-content grey darken-1  white-text">
							<span class="card-title" id="global-settings-title">Global settings</span>
						</div>
						<div class="card-content">
							<div class="row">
								<p class="caption" id="global-settings-web-app">Web app</p>
							</div>
							<div class="row">
								<div class="switch">
									<label>
										<input id="LaunchWebAppOnStartup" name="LaunchWebAppOnStartup" type="checkbox" form="settings-form">
										<span class="lever"></span>
										<span id="global-settings-launch-web-app-on-startup">Launch Web App On Startup</span>
									</label>
								</div>
							</div>

							<div class="row">
								<p class="caption" id="global-settings-global-setting">Global settings</p>
							</div>
							<div class="row">
								<div class="switch">
									<label>
										<input id="ParseEmojis" name="ParseEmojis" type="checkbox" form="settings-form">
										<span class="lever"></span>
										<span id="global-settings-parse-emojis">Parse Emojis</span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row center-align">
				<button id="saveButton" class="btn waves-effect waves-light" onclick="saveSettings(event)">
					<span id="save-button-text">Save settings</span>
					<i class="material-icons right">send</i>
				</button>
			</div>
		</form>
	</div>
	<script src="Statics/Js/materialize.min.js"></script>
	<script>
		var channelChipsInstance;
		var channelTooltipInstance;
		var usernameChipsInstance;
		var bilibiliBlockListUsernameTooltipInstance;
		var uidChipsInstance;
		var bilibiliBlockListUIDTooltipInstance;
		var keywordsChipsInstance;
		var bilibiliBlockListKeywordTooltipInstance;
		var saveButtonElement;

		// Helper functions
		// https://regex101.com/r/5Nrx9S/4
		var twitchChannelNameRegex = /^(?:https?:\/\/)?(?:(?:www\.|go\.)?twitch\.tv\/)?([a-z0-9_]{1,25})[\/?]?(?:.)*$/i;

		function extractTwitchChannelName(input) {
			return twitchChannelNameRegex.exec(input);
		}

		function toggleTwitchOAuthVisibility() {
			var tokenField = document.getElementById("twitch_oauth_token");
			if (tokenField.type === "password") {
				tokenField.type = "text";
			} else {
				tokenField.type = "password";
			}
		}

		function saveSettings(event) {
			event.preventDefault();

			saveButtonElement.enabled = false;
			saveButtonElement.classList.add("disabled")

			for (var key in data) {
				var element = document.getElementById(key);

				if (element === null) {
					continue;
				}

	

				if (element.tagName.toLowerCase() === "input") {
					switch (element.type) {
						case "checkbox":
							data[key] = element.checked;
							break;
						case "password":
						case "text":
							data[key] = element.value;
							break;
						case "number":
							data[key] = parseInt(element.value);
							if (isNaN(data[key])) {
								data[key] = 0;
							}
							break;
					}
				}
			}

			data.twitch_channels = channelChipsInstance.getData().map(function (channelTag) {
				return channelTag.tag;
			});

			data.bilibili_block_list_username = usernameChipsInstance.getData().map(function (usernameTag) {
				return usernameTag.tag;
			});

			data.bilibili_block_list_uid = uidChipsInstance.getData().map(function (uidTag) {
				return uidTag.tag;
			});

			data.bilibili_block_list_keyword = keywordsChipsInstance.getData().map(function (keywordTag) {
				return keywordTag.tag;
			});

			let new_data = data;
			new_data.bilibili_block_list_username = JSON.stringify(data.bilibili_block_list_username);
			new_data.bilibili_block_list_uid = JSON.stringify(data.bilibili_block_list_uid);
			new_data.bilibili_block_list_keyword = JSON.stringify(data.bilibili_block_list_keyword);

			// new HttpRequest instance
			var request = new XMLHttpRequest();
			request.open("POST", "/submit");
			request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
			request.onabort = function () {
				M.toast({ html: set_translation("request-onabort", false) === "" ? "Something went wrong, try again later." : set_translation("request-onabort", false) })
			};
			request.onerror = function () {
				M.toast({ html: set_translation("request-onerror", false) === "" ? "Something went wrong while trying to save the settings. Make sure Beat Saber is still running." : set_translation("request-onerror", false) })
			};
			request.onload = function () {
				if (request.readyState === 4 && request.status === 204) {
					M.toast({ html: set_translation("request-onload", false) === "" ? "Settings have been saved successfully." : set_translation("request-onload", false) })
				} else {
					M.toast({ html: set_translation("request-onerror", false) === "" ? "Something went wrong while trying to save the settings. Make sure Beat Saber is still running." : set_translation("request-onerror", false) })
				}
			};
			request.onloadend = function () {
				saveButtonElement.classList.remove("disabled")
				saveButtonElement.enabled = true;
			};
			request.send(JSON.stringify(new_data));
		}

		// Data will be injected here by the backend
		var data = {};

		// your page initialization code here
		// the DOM will be available here
		function onLoad() {
			for (var key in data) {
				var value = data[key];
				var element = document.getElementById(key);
				if (element == null) {
					if (["bilibili_block_list_keyword", "bilibili_block_list_uid", "bilibili_block_list_username"].includes(key)) {
						data[key] = JSON.parse(value);
					}
					continue;
				}
				
				if (typeof value === "string" || typeof value === "number") {
					element.value = value;
				} else if (typeof value === "boolean") {
					element.checked = value;
				}
			}

			document.getElementById("twitch_oauth_token_visible").checked = document.getElementById("twitch_oauth_token").type !== "password";

			var oauthHash = location.hash.substr(1);
			var accessToken = oauthHash.substr(oauthHash.indexOf('access_token=')).split('&')[0].split('=')[1];

			// Clean up url
			history.pushState({}, "ChatCore Settings", location.origin)

			if (accessToken) {
				var tokenField = document.getElementById("twitch_oauth_token");
				tokenField.value = 'oauth:' + decodeURIComponent(accessToken);
			}

			saveButtonElement = document.getElementById("saveButton");
		}

		onLoad();
	</script>
	<script src="Statics/Js/default.js"></script>
</body>
</html>